<template>
	<div v-show="visible" class="full-container">
		<component v-if="id&&showDetail" :is="tabName" :crm-type="crmType" :id="id" class="d-view"
			@hide-view="hiddenView" />
	</div>
</template>

<script type="text/javascript">
	import {
		getMaxIndex
	} from '@/utils/index'
	

	export default {
		name: 'CRMFullScreenDetail', // 客户管理下 重要提醒 回款计划提醒
		components: {
			
		},
		props: {
			/** 模块ID */
			id: [String, Number],
			/** 没有值就是全部类型 有值就是当个类型 */
			crmType: {
				type: String,
				default: ''
			},
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showDetail: false
			}
		},
		computed: {
			tabName() {
				return ''
			}
		},
		watch: {
			visible(val) {
				this.showDetail = val
				if (val) {
					document.body.appendChild(this.$el)
					this.$el.addEventListener('click', this.handleDocumentClick, false)
					this.$el.style.zIndex = getMaxIndex()
				}
			},
			showDetail(val) {
				if (!val) {
					setTimeout(() => {
						this.$emit('update:visible', false)
					}, 350)
				}
			}
		},
		mounted() {
			if (this.visible) {
				document.body.appendChild(this.$el)
				this.$el.addEventListener('click', this.handleDocumentClick, false)
				this.$el.style.zIndex = getMaxIndex()
			}
		},

		beforeDestroy() {
			// remove DOM node after destroy
			if (this.$el && this.$el.parentNode) {
				this.$el.parentNode.removeChild(this.$el)
				this.$el.removeEventListener('click', this.handleDocumentClick, false)
			}
		},
		methods: {
			hiddenView() {
				this.showDetail = false
			},
			handleDocumentClick(e) {
				e.stopPropagation()
				if (this.$el == e.target) {
					this.showDetail = false
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.full-container {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: auto;
		margin: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.d-view {
		position: fixed;
		width: 950px;
		top: 0px;
		bottom: 0px;
		right: 0px;
	}
</style>